Text Effects
Various ways to animate and style text for maximum impact in your presentations.
Typewriter
Text appears letter by letter with a blinking cursor, like someone typing in real-time.
Text Scramble
Random characters resolve into readable text, like hacking scenes in movies.
Animated Gradient
Text filled with shifting color gradients that animate continuously.
Stroke/Outline
Hollow text with just the outline. Hover to fill it in.
Glitch Effect
Text that jitters with RGB color separation for a digital glitch look.
Blur Reveal
Text starts blurry and animates into sharp focus.
Split Text Wave
Each letter animates independently, creating a wave effect on hover.
Text Highlight
Background color "paints" behind text, like a highlighter marker.
Variable Font
Font weight and spacing morph smoothly on hover.
Page Transitions
Different ways to transition between slides or pages in your presentation.
Wipe Transition
New slide wipes across the screen from left to right.
Circle Reveal
New slide expands from a circle in the center.
3D Flip
Slides flip like a card in 3D space.
Zoom Through
Current slide zooms out as new slide zooms in.
Mouse & Cursor Effects
Interactive effects that respond to mouse movement and hover.
Spotlight
A light follows your cursor, illuminating the dark background.
Ripple Effect
Clicking creates an expanding ripple, like water.
Magnetic Button
Button subtly pulls toward your cursor when nearby.
3D Tilt
Card tilts in 3D space following your mouse position.
Background Effects
Atmospheric backgrounds that add depth and visual interest.
Gradient Mesh
Animated blob-like gradients that shift and morph.
Noise/Grain Texture
Subtle film grain overlay adds texture and warmth.
Animated Grid
Moving grid pattern creates a tech/cyber aesthetic.
Wave Animation
Flowing wave pattern for a calm, organic feel.
3D Effects
CSS 3D transforms for depth and dimension.
Flip Card
Card flips to reveal content on the back. Hover to see.
Floating Element
Element gently bobs up and down, creating a dreamy effect.
3D Cube
Fully rotating 3D cube made with CSS transforms.
Data Visualization
Animated charts and counters for presenting data.
Animated Bar Chart
Bars grow from zero to their values.
Line Chart Draw
Line traces itself from left to right.
Progress Ring
Circular progress indicator that fills up.
Counter Animation
Numbers count up smoothly to a target value.
Image Effects
Ways to animate and enhance images in presentations.
Ken Burns Effect
Slow zoom and pan, like in documentaries.
Hover Zoom
Image zooms in when you hover over it.
CSS Filters
Hover each square to see different filter effects.
Micro-interactions
Small UI feedback animations that make interfaces feel alive.
Loading Spinner
Simple spinning indicator while content loads.
Success Checkmark
Animated checkmark for successful actions.
Error Shake
Element shakes to indicate an error.
Toast Notification
Slide-in notification message.
Advanced Effects
More complex animations using physics and SVG.
Physics Bounce
Realistic bouncing with proper easing curves.
SVG Morph
Shape transforms smoothly into another shape.
Confetti
Burst of colorful confetti for celebrations.